<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="demo">
    <form action="/xxx">
      <span>用户名: </span>
      <input type="text" v-model="username"><br>
  
      <span>密码: </span>
      <input type="password" v-model="password"><br>
  
      <span>性别: </span>
      <input type="radio" id="female" v-model="sex" value="female">
      <label for="female">女</label>
      <input type="radio" id="male" v-model="sex" value="male">
      <label for="male">男</label><br>
  
      <span>爱好: </span>
      <input type="checkbox" id="basket" v-model="likes" value="b">
      <label for="basket">篮球</label>
      <input type="checkbox" id="foot" v-model="likes" value="f">
      <label for="foot">足球</label>
      <input type="checkbox" id="pingpang" v-model="likes" value="p">
      <label for="pingpang">乒乓</label><br>
  
      <span>城市: </span>
      <select v-model="cityId">
        <option :value="item.id" v-for="item in citys" :key="item.id">{{item.name}}</option>
      </select><br>
      <span>介绍: </span>
      <textarea rows="10" v-model="inpt"></textarea><br><br>
  
      <input type="submit" value="注册" @click.prevent="register">
    </form>
  </div>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data() {
        return {
          username: '',
          password: '',
          sex: 'male', //male为男 female为女
          likes: ['p'],
          citys: [
            {id: 1, name: '北京'},
            {id: 2, name: '上海'},
            {id: 3, name: '广州'}
          ],
          cityId: 1,
          inpt: ''
        }
      },
      methods: {
        register() {
          alert('注册层高')
        }
      },
    })
  </script>
</body>
</html>